<template>
  <div>
    <div class="box">测试</div>
    <button @click="add">添加</button>
    <button @click="stop">停止</button>
  </div>
</template>
<script>
import { MyTask } from './250402/MyTask.js'
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
    },
    stop() {
      this.task.stop()
    }
  },
  mounted() {
    console.log(`helloworld`)
    let task = new MyTask()

    const some1 = (next) => {
      let i = 0
      let tid = setInterval((res) => {
        if (i > 10) {
          stop()
          next()
        } else {
          console.log('some1', i++)
        }
      }, 1e3)
      const stop = () => {
        clearInterval(tid)
      }
      return {
        stop
      }
    }
    const some2 = (next) => {
      let i = 0
      let tid = setInterval((res) => {
        console.log('some2', i++)
      }, 1e3)
      return {
        stop() {
          clearInterval(tid)
        }
      }
    }
    task.add(some1)
    task.add(some2)

    this.task = task
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
